<template>
  <div class="bgBox">
    <div class="bgBlock">
      <img src="@/assets/imgs/背景2.jpg" />
    </div>
    <div class="company">
      <div class="logo"><img src="@/assets/imgs/logo@2x.png" /></div>
      <div class="nama">启程兰台铁路档案管理</div>
    </div>
    <div class="footer">
      <div>
        <div class="item">
          <a href="javascript:;">帮助</a>
          <a href="javascript:;">隐私</a>
          <a href="javascript:;">条款</a>
        </div>
        <div class="item">COPYRIGHT@ 2022启程兰台公司</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>


<style scoped lang="less">
.bgBox {
  width: 100%;
  height: 100%;
  position: relative;
  .bgBlock {
    width: 100%;
    height: 100%;
    & img {
      width: 100%;
      height: 100%;
    }
  }
  .company {
    position: absolute;
    left: 90px;
    top: 25px;
    z-index: 9;
    display: flex;
    align-items: center;
    .logo {
      width: 75px;
      height: 75px;
      margin-right: 17px;
      & img {
        width: 100%;
        height: 100%;
      }
    }
    .nama {
      font-size: 35px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      line-height: 132px;
      color: #ffffff;
      letter-spacing: 10px;
      opacity: 1;
    }
  }
  .footer {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: normal;
    opacity: 1;
    position: absolute;
    bottom: 20px;
    z-index: 10;
    display: flex;
    justify-content: center;
    .item {
      text-align: center;
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
      & a {
        color: #ffffff;
        letter-spacing: normal;
      }
    }
  }
}
</style>
